<template>
  <basic-dialog
    width="60%"
    title="选择计量单位"
    :visible="visible"
    :showFooter="false"
    :handleClose="handleCloseDialog"
  >
    <BasicForm
      :colNumOfRow="2"
      :isScalingBtn="false"
      :hasQueryPermission="false"
      :formColumns="formItems"
      :dataSource="formData"
      :handleSearchForm="handleQueryForm"
      @getFormData="getFormData"
    />
    <BasicTable
      showActionCol
      :showSelectCol="false"
      :loading="TableInfo.loading"
      :columns="TableInfo.columns"
      :dataSource="TableInfo.list"
      :pagination="pagination"
      :pageSizes="pageSizes"
      :actionRender="renderTableBtnAction"
      @pageChange="handlePageChange"
      @pageSizeChange="handlePageSizeChange"
    />
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import BasicForm from '@/components/BasicForm';
import BasicTable from '@/components/BasicTable';
import basePage from '@/mixins/commodity/basePage';
import { FORM_ITEMS, TABLE_COLUMNS } from './constants';
import { TableInfo, getInitFormData } from '@/utils/getUtils';
import { getTableAction } from '@/utils/getBtnsRender';
import { getUnitUnderCateService } from '@/api/commodity/common';
export default {
  mixins: [basePage],
  components: {
    BasicDialog,
    BasicForm,
    BasicTable
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    categoryUuid: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      formItems: FORM_ITEMS,
      formData: getInitFormData(FORM_ITEMS),
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS })
    }
  },
  watch: {
    visible (newVal) {
      newVal && this.getTableData()
    }
  },
  methods: {
    // 渲染表格按钮
    renderTableBtnAction (h, { row }) {
      const actionList = [
        { label: '选择', method: this.handleChooseUnit }
      ]
      return getTableAction({ h, row, actionList })
    },
    // 获取表单查询入参
    getSearchFormParams () {
      const data = {
        ...this.paginationParams,
        unitName: this.formData.unitName,
        categoryUuid: this.categoryUuid
      }
      return data
    },
    // 获取表格数据
    async getTableData () {
      const data = this.getSearchFormParams()
      const res = await getUnitUnderCateService(data, this.TableInfo.setLoading)
      this.TableInfo.setList(res?.retData?.results ?? [])
      this.setTotalNum(res?.retData?.totalNum ?? 0)
    },
    // 选择计量单位
    handleChooseUnit (row) {
      this.$emit('getUnitName', row.unitName);
      this.$emit('getUnitInfo', row)
      this.handleCloseDialog()
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$emit('update:visible', false)
    },
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-dialog__header {
  border-bottom: 1px solid #e8eaec;
}
/* 分页样式 */
.pagination_wrap {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
